<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>家属等待大屏</title>
	<script type="text/javascript" src="js/jquery.js"></script>
	<link rel="stylesheet" type="text/css" href="./css/comon0.css">
	<link rel="stylesheet" type="text/css" href="./css/main.css">
	<link rel="stylesheet" href="js/elementIndex.css">

	<script src="js/axios.js"></script>
	<script src="js/vue.js"></script>
	<script src="js/element.js"></script>
	<script src="js/echarts.js"></script>
</head>

<style>
	/* css/index.css */
</style>


<body>

	<!--------------------------------------------------------------------------------- 以下是 html	 --------------------------------------------------------------------------------->
	<div class="mainbox" id="app">
		<div class="mainbox-head">
			<div class="mainbox-head-left">
				<div style="float: left;width: 2.2rem;height:1.2rem;">
					<img src="images/logo2.png" class="image_logo">
				</div>
				<div
					style="width:0.01rem;height: 0.35rem;background-color: #FFFFFF;float: left;opacity: 0.2;margin-left: 0.2rem;margin-top: 0.08rem;">
				</div>
				<div style="float: left;margin-left:0.3rem;">
					<span class="mainbox-head-left-span">{{ hospitalName }}患者手术进程</span>
				</div>
			</div>
			<div class="mainbox-head-right">
				<div style="float: left;width: 0.3rem;height:0.3rem;margin-top: 0.06rem;">
					<img src="images/icon-time.png" width="100%" height="100%">
				</div>
				<div style="float: left;margin-left:0.2rem">
					<span class="mainbox-head-middle-span" style="color: #9FF6FF;font-size:0.3rem;">
						{{ currentTime }}
					</span>
				</div>
				<div
					style="width:0.01rem;height: 0.3rem;background-color: #FFFFFF;float: left;opacity: 0.2;margin-left: 0.2rem;margin-top: 0.08rem;">
				</div>
				<div style="float: left;margin-left: 0.2rem;">
					<span class="mainbox-head-right-span">{{ currentDate }}</span>
				</div>
			</div>
		</div>

		<div class="mainbox-body">
			<div class="card" v-for="(item,index) in dataTable" :key="item.opId">
				<div class="card-left">
					<div v-if=" item.status == '2' ">
						<img src="images/blue_quan.png" class="card-left-img" />
						<span class="card-left-span">复苏中</span>
					</div>
					<div v-else>
						<img src="images/red_quan.png" class="card-left-img" />
						<span class="card-left-span">手术中</span>
					</div>
				</div>
				<div class="card-right">
					<div class="card-right-top" v-text="item.patientName"></div>
					<div v-if=" item.typeNumber == 'true' " class="card-right-kuang">急诊</div>
					<div class="card-right-bottom">
						<span>入室时间 {{item.inRoomTime}}</span>

						<div style="width:0.01rem;height: 0.2rem;background-color: #FFFFFF;
							float: left;  opacity: 0.2;  margin:0.03rem 0.2rem 0rem -.85rem; ">
						</div>

						<div class="card-sick">
							<div class="marquee">
								<span v-if="getSickInfoLength(item) > 10" class="marquee-span">
									{{ item.sickregion + ' - ' + item.sickbedNo + '床'}}
								</span>
								<span v-else>
									{{ item.sickregion + ' - ' + item.sickbedNo + '床'}}
								</span>
							</div>

						</div>


					</div>
				</div>
			</div>
		</div>

		<div class="mainbox-foot">
			<div style="float: left;width: 0.4rem;height:0.4rem;margin-top: 0.08rem;margin-left: 5rem;">
				<img src="images/icon-aixin.png" width="100%" height="100%">
			</div>
			<div style="float: left;margin-left: 0.1rem;">
				<span class="mainbox-head-middle-span">尊敬的家属朋友，请您耐心等待，保持安静，谢谢！</span>
			</div>
		</div>
	</div>



	<!--------------------------------------------------------------------------------- 以下是 js --------------------------------------------------------------------------------->
	<script>
		$(document).ready(function () {
			var whei = $(window).width();
			$("html").css({ fontSize: whei / 20 });
			$(window).resize(function () {
				var whei = $(window).width();
				$("html").css({ fontSize: whei / 20 });
			});
		});
	</script>
	<script type="text/javascript">




		// 将 axios 绑定到 Vue 原型上
		Vue.prototype.$axios = axios;

		new Vue({
			el: '#app',
			data() {
				return {
					dataTable: [], // 初始化为空数组
					httpUrl: 'http://222.71.175.10:1111',
					//httpUrl: 'http://192.168.123.2:82',
					//httpUrl: 'http://192.168.1.188:82',
					surgicalNumberData: '', // 初始化为空字符串，将从 URL 参数中获取
					currentDate: '', // 存储当前日期
					currentTime: '', // 存储当前时间
					hospitalName: '', // 医院名称
				};
			},
			mounted() {
				this.getCurrentDateTime(); // 获取当前日期和时间
				this.getSurgicalNumber(); // 从 URL 中获取 surgical 参数
				this.init(); // 页面加载时调用初始化方法

				// 每半分钟请求一次数据（30s）
				setInterval(() => {
					this.init();
				}, 30 * 1000); // 30s的毫秒数

				// 每秒请求当前时间
				setInterval(() => {
					this.getCurrentDateTime();
				}, 1000); // 1000ms = 1s




			},
			methods: {

				// 从 URL 中获取 surgical 参数的方法
				getSurgicalNumber() {
					const params = new URLSearchParams(window.location.search);
					this.surgicalNumberData = params.get('surgical') || '001'; // 默认值为 '001' 如果参数不存在
				},

				// 获取当前日期和时间的方法
				getCurrentDateTime() {
					const now = new Date();
					const optionsDate = { year: 'numeric', month: '2-digit', day: '2-digit' };
					const optionsWeekday = { weekday: 'long' };

					const formattedDate = now.toLocaleDateString('zh-CN', optionsDate).replace(/\//g, '-');
					const formattedWeekday = now.toLocaleDateString('zh-CN', optionsWeekday);

					// 在日期和星期之间添加一个空格
					this.currentDate = `${formattedDate} ${formattedWeekday}`;
					this.currentTime = now.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
				},

				// 初始化方法：发起请求获取数据
				init() {
					const url = `${this.httpUrl}/oriot_op/api/familyMembersWaitingMap/geFamilyMembersWaitingMap?surgicalNumber=${this.surgicalNumberData}`;

					// 使用 axios 来发起 HTTP 请求
					this.$axios.get(url)
						.then(response => {
							const rep = response.data;
							console.log('++++++++++++');
							console.log(rep);

							// 判断返回的响应数据是否符合预期
							if (rep.code === '1') {
								this.hospitalName = rep.hospitalName; // 医院名称
								this.dataTable = rep.data; // 将数据赋值给 dataTable
								console.log(this.dataTable); // 打印到控制台查看
							} else {
								console.error('接口返回异常', rep.msg);
							}
						})
						.catch(error => {
							console.error('请求失败:', error);
						});

				},
				// 计算病区和床位的总长度
				getSickInfoLength(item) {
					return (item.sickregion + '-' + item.sickbedNo).length;
				}
			},
		});
	</script>

</body>

</html>